<template>
  <div class="page-container fullpage">
    <el-card>
      <h3>查看用户</h3>
      <el-descriptions column="1" border style="margin-top:12px">
        <el-descriptions-item label="用户名">{{ info.userName || info.username || '-' }}</el-descriptions-item>
        <el-descriptions-item label="英文名">{{ info.enName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ info.mobile || '-' }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ info.email || '-' }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{ info.birthday || '-' }}</el-descriptions-item>
      </el-descriptions>

      <div style="margin-top:12px; text-align:right">
        <el-button @click="() => router.push('/admin/users')">返回用户管理</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '../utils/api'

const route = useRoute()
const router = useRouter()
const username = route.params.username as string || ''
const info = ref<any>({})

const load = async () => {
  if (!username) return
  try {
    // attempt user search endpoint
    const resp: any = await api.get('/user/search', { params: { username } })
    if (resp && resp.operationResult === 'SUCC') {
      info.value = resp.data || resp || {}
      if (Array.isArray(info.value) && info.value.length) info.value = info.value[0]
    } else {
      const usersResp: any = await api.get('/users')
      const list = Array.isArray(usersResp?.data) ? usersResp.data : (Array.isArray(usersResp) ? usersResp : [])
      info.value = list.find((u: any) => u.userName === username || u.username === username) || {}
    }
  } catch (err) { console.error('load user', err) }
}

onMounted(() => { load() })
</script>

<style scoped>
.page-container { padding: 16px }
</style>
